<template>
    <div class="app-container calendar-list-container">
        <basic-container>
            <el-form
                :model="baseForm"
                ref="baseFormRef"
                :rules="baseFormRules"
                label-width="120px"
                :inline="false"
                size="normal"
            >
                <!-- 商品基本信息 -->
                <el-collapse v-model="activeNames">
                    <el-collapse-item name="1">
                        <template slot="title">
                            <h2>1.商品基本信息</h2>
                        </template>

                        <el-form-item label="商品分类">
                            <el-row :gutter="20">
                                <el-col :span="5">
                                    <el-select
                                        v-model="OneCategoryValue"
                                        @change="chooseOneCategory"
                                    >
                                        <el-option
                                            v-for="item in OneCategoryOptions"
                                            :key="item.Value"
                                            :label="item.Text"
                                            :value="item.Value"
                                        /> </el-select
                                ></el-col>
                                <el-col :span="5">
                                    <el-select
                                        v-model="TwoCategoryValue"
                                        @change="chooseTwoCategory"
                                    >
                                        <el-option
                                            v-for="item in TwoCategoryOptions"
                                            :key="item.Value"
                                            :label="item.Text"
                                            :value="item.Value" /></el-select
                                ></el-col>
                                <el-col :span="5">
                                    <el-select v-model="ThreeCategoryValue" @change="chooseThreeCategory">
                                        <el-option
                                            v-for="item in ThreeCategoryOptions"
                                            :key="item.Value"
                                            :label="item.Text"
                                            :value="item.Value"
                                        /> </el-select
                                ></el-col>
                                <el-col :span="5">
                                    <el-select v-model="FourCategoryValue" @change="chooseFourCategory">
                                        <el-option
                                            v-for="item in FourCategoryOptions"
                                            :key="item.Value"
                                            :label="item.Text"
                                            :value="item.Value"
                                        /> </el-select
                                ></el-col>
                            </el-row>
                        </el-form-item>
                        <el-form-item label="店铺编号">
                            <el-input v-model="baseForm.ShopId"></el-input>
                        </el-form-item>
                        <el-form-item label="商品名称">
                            <el-input v-model="baseForm.GoodsName"></el-input>
                        </el-form-item>
                        <el-form-item label="标题">
                            <el-input v-model="baseForm.MainTitle"></el-input>
                        </el-form-item>
                        <el-form-item label="商品描述">
                            <el-input
                                v-model="baseForm.GoodsDetail"
                                :rows="4"
                                type="textarea"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="商品主图">
                            <el-upload
                                class="upload-demo"
                                :action="uploadUrl"
                                :headers="myHeaders"
                                :on-preview="handlePreviewMainPic"
                                :on-remove="handleRemoveMainPic"
                                :on-success="handleSuccessMainPic"
                                :file-list="fileListMainPic"
                                list-type="picture"
                                :limit="3"
                            >
                                <el-button size="small" type="primary"
                                    >点击上传</el-button
                                >
                                <div slot="tip" class="el-upload__tip">
                                    只能上传jpg/png文件，且不超过300kb，商品图片您最多可以上传5张
                                </div>
                            </el-upload>
                        </el-form-item>

                        <el-form-item label="商品详情图">
                            <el-upload
                                :action="uploadUrl"
                                :headers="myHeaders"
                                :on-preview="handlePreviewDetailPic"
                                :on-remove="handleRemoveDetailPic"
                                :on-success="handleSuccessDetailPic"
                                :file-list="fileListDetailPic"
                                list-type="picture-card"
                                :limit="15"
                            >
                                <i class="el-icon-plus"></i>
                                <div slot="tip" class="el-upload__tip">
                                    只能上传jpg/png文件，且不超过1M，商品详情图您最多可以上传15张
                                </div>
                            </el-upload>
                            <el-dialog :visible.sync="detailPicDialogVisible">
                                <img
                                    width="100%"
                                    :src="detailPicDialogImageUrl"
                                    alt="详情图"
                                />
                            </el-dialog>
                        </el-form-item>
                    </el-collapse-item>
                    <!-- 2.商品规格与价格 -->
                    <el-collapse-item name="2">
                        <template slot="title">
                            <h2>2.商品规格与价格</h2>
                        </template>
                        <el-checkbox v-model="checked" style="margin: 10px 0"
                            >使用规格录入价格库存</el-checkbox
                        >
                        <el-divider></el-divider>
                        <div>
                            <h3>
                                <span>商品规格与库存:</span>
                                <span style="margin-left: 20px" v-if="!checked"
                                    >不使用规格录入价格、库存</span
                                >
                            </h3>
                            <div v-if="checked">
                                <el-form-item
                                    v-for="item in productSpecList"
                                    :key="item.Id"
                                    :label="item.Title"
                                >
                                    <div
                                        style="display: flex"
                                        ref="specItemRef"
                                    >
                                        <el-checkbox-group
                                            ref="sepeRef"
                                            v-model="item.checkSpecList"
                                            @change="handleSpecChange(item)"
                                        >
                                            <el-checkbox
                                                v-for="(child,
                                                index) in item.SpeValues"
                                                :key="child.Id"
                                                :label="child.Id"
                                            >
                                                {{ child.Name }}
                                                <i  style="margin-left:10px;"
                                                    class="el-icon-close"
                                                    @click.stop.self="
                                                        removeSpecItem(child,item)
                                                    "
                                                ></i>
                                            </el-checkbox>
                                        </el-checkbox-group>

                                        <el-input
                                            v-if="item.add"
                                            size="mini"
                                            style="
                                                width: 150px;
                                                margin-left: 20px;
                                            "
                                            v-model="item.addValue"
                                            @change="addSpecDone(item)"
                                        ></el-input>
                                        <el-button
                                            class="add-spec"
                                            v-if="!item.add"
                                            type="text"
                                            size="small"
                                            icon="el-icon-plus"
                                            @click="addSpec(item)"
                                            >新增规格</el-button
                                        >
                                    </div>

                                    <div v-for="pic in item.selectList" style="display:flex;">
                                        <div>
                                            <img style="width:20px;height:20px;" v-if="pic.PicUrl" :src="pic.PicUrl" alt="">
                                            <span>{{pic.Name}}</span>
                                        </div>
                                        <span style="margin:0 20px;">|</span>

                                        <el-upload
                                            :data="pic"
                                            :action="uploadUrl"
                                            :headers="myHeaders"
                                            :show-file-list="false"
                                            :on-success="handleUploadSpecPicSuccess.bind(null,pic)"
                                            >
                                            <el-button size="mini" type="primary" >上传图片</el-button>
                                            </el-upload>
                                    </div>
                                </el-form-item>
                                <el-table
                                    style="
                                        margin-left: 160px;
                                        margin-bottom: 20px;
                                        width: 86%;
                                    "
                                    :data="specTable"
                                    border
                                    stripe
                                >   
                                    <!-- <template v-if="productSpecList && productSpecList.length == 1">
                                        <el-table-column
                                        :label="productSpecList[0].GoodsSpecValueId1"
                                        prop="GoodsSpecValueName1"
                                    ></el-table-column>
                                    </template>
                                    <template v-if="productSpecList && productSpecList.length >= 2">
                                        <el-table-column
                                        :label="productSpecList[0].Title"
                                        prop="GoodsSpecValueName1"
                                    >
                                        </el-table-column>
                                    <el-table-column
                                        :label="productSpecList[1].Title"
                                        prop="GoodsSpecValueName2"
                                    >
                                    </el-table-column>
                                    </template> -->
                                    
                                    </el-table-column>
                                    <el-table-column label="出售价" prop="Price">
                                        <template slot-scope="scope">
                                            <el-input v-model="scope.row.Price"></el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="供货价" prop="PriceSupply">
                                        <template slot-scope="scope">
                                            <el-input v-model="scope.row.PriceSupply"></el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="库存">
                                        <template slot-scope="scope" prop="Stock">
                                            <el-input v-model="scope.row.Stock"></el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="批量操作">
                                        <template slot-scope="scope">
                                            <el-select @change="handleSelect(scope.row)" v-model="scope.row.batchHandleValue" placeholder="批量操作">
                                                <el-option
                                                    v-for="(item,index) in batchOptions"
                                                    :key="index"
                                                    :label="item.Title+'--'+item.name"
                                                    :value="item.Id" /></el-select>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                        <el-form-item label="重量">
                            <el-input v-model="baseForm.Weight">
                                <template slot="append">kg</template>
                            </el-input>
                        </el-form-item>
                        <el-divider></el-divider>
                        <h3>商品参数</h3>
                        <div v-if="!OneCategoryValue">
                            暂无商品参数，请选择商品分类
                        </div>
                        <div v-else>
                            <p v-if="productParamList && productParamList.length <= 0">
                                该商品无参数，如有需要，请联系管理员添加
                            </p>
                            <template v-else>
                                <el-form-item
                                    v-for="param in productParamList"
                                    :key="param.id"
                                    :label="param.Name"
                                >
                                    <el-input
                                        v-model="param.Value"
                                    ></el-input>
                                </el-form-item>
                            </template>
                        </div>
                    </el-collapse-item>
                    <!-- 服务于承诺 -->
                    <el-collapse-item name="3">
                        <template slot="title">
                            <h2>3.服务与承诺</h2>
                        </template>
                        <el-form-item label="承诺">
                            <el-checkbox-group
                                v-model="baseForm.checkServiceList"
                            >
                                <el-checkbox label="1"
                                    >七天无理由退换货</el-checkbox
                                >
                                <el-checkbox label="2">假一配十</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-collapse-item>
                </el-collapse>
            </el-form>
            <div class="btns">
                <el-button type="primary" :disabled="isPublish" @click="handleSave">确 定</el-button>
                <el-button type="primary">预 览</el-button>
            </div>
        </basic-container>
    </div>
</template>

<script>
import store from "@/store";
import setting from "@/setting";
import publishApi from "@/api/businessProduct/productPublish";
import { GetSpecListByIds, calcDescartes } from "@/util/util";
export default {
    name: "productUpdate",
    props: {
        id: {
            type: String,
            defalut: "",
        },
    },
    data() {
        return {
            myHeaders: {
                Authorization: "",
            },
            batchOptions: [],
            uploadUrl: setting.uploadUrl,
            baseUrl: setting.apiUrl,
            OneCategoryOptions: [],
            OneCategoryValue: "",
            TwoCategoryOptions: [],
            TwoCategoryValue: "",
            ThreeCategoryOptions: [],
            ThreeCategoryValue: "",
            FourCategoryOptions: [],
            FourCategoryValue: "",
            activeNames: ["1", "2", "3"],
            baseForm: {
                ShopId: null, //店铺编号
                GoodsTypeId: null, //商品分类Id
                BrandId: null, //品牌ID
                GoodsName: null, //商品名称
                MainTitle: null, //商品标题
                GoodsDetail: null, //商品详情
                Weight: null, //重量
                TransportTemplateId: null, //运费模板Id(暂时不用，保留)
                ImgUrls: ["xx", "xx", "xx"], //商品图片
                InfoImgUrls: ["xx", "xx", "xx", "xx", "xx"], // 商品详情图片
                ParaList: [], //参数模型
                SpecPicList: [], //规格图片
                SpecPriceList: [], // 规格价格
                checkServiceList: [], // 选择的服务于承诺列表
            },
            baseFormRules: {},
            fileListMainPic: [], // 商品主图列表
            fileListDetailPic: [],
            detailPicDialogVisible: false, //详情图弹框
            detailPicDialogImageUrl: "", // 详情图路径

            categoryOneChoose: false,
            categoryTwoChoose: false,
            categoryThreeChoose: false,

            productParamList: [], //商品参数
            productSpecList: [], //商品规格与库存
            specTable: [], //规格售价表格
            checked: false,
            isPublish: false,
        };
    },
    created() {
        const token = store.getters.access_token;
        this.myHeaders.Authorization = "Bearer " + token;
        if (this.id) {
            this.getProductInfoById();
        }
    },
    watch: {
        id(newValue, oldValue) {
            if (newValue) {
                this.getProductInfoById();
            }
        },
    },
    methods: {
        // 根据id获取商品编辑信息 并回显
        getProductInfoById() {
            let _dataJson = {
                Id: this.id,
            };
            publishApi
                .getProduct(_dataJson)
                .then(({ data: res }) => {
                    console.log(res);
                    if (res.code === 0) {
                        this.baseForm = res.data;
                        
                        // 分类回显
                        this.OneCategoryOptions = res.data.DropType1;
                        this.OneCategoryValue =
                            this.OneCategoryOptions.filter(
                                (item) => item.Selected
                            )[0].Value || "";
                        this.TwoCategoryOptions = res.data.DropType2;
                        this.TwoCategoryValue =
                            this.TwoCategoryOptions.filter(
                                (item) => item.Selected
                            )[0].Value || "";
                        this.ThreeCategoryOptions = res.data.DropType3;
                        this.ThreeCategoryValue =
                            this.ThreeCategoryOptions.filter(
                                (item) => item.Selected
                            )[0].Value || "";
                        this.FourCategoryOptions = res.data.DropType4;
                        this.FourCategoryValue =
                            this.FourCategoryOptions.filter(
                                (item) => item.Selected
                            )[0].Value || "";
                        // 商品主图和详情图回显
                        this.baseForm.ImgUrls.forEach(item=>{
                            let file = {
                                name:item.split("/").pop(),
                                url:this.baseUrl + item
                            }
                            this.fileListMainPic.push(file)
                        })

                        this.baseForm.InfoImgUrls.forEach(item=>{
                            let file = {
                                name:item.split("/").pop(),
                                url:this.baseUrl + item
                            }
                            this.fileListDetailPic.push(file)
                        })

                        // 商品参数回显
                        if (
                            this.baseForm.Parammodels &&
                            this.baseForm.Parammodels.length > 0
                        ) {
                            this.productParamList = JSON.parse(
                                JSON.stringify(this.baseForm.Parammodels)
                                    .replace(/Id/g, "ParaId")
                                    .replace(/ParaValue/g, "Value")
                            );
                        }

                        // 商品规格回显
                        if (this.TwoCategoryValue) {
                            this.getProductSpecs(this.TwoCategoryValue);
                        }
                    }
                })
                .catch((err) => {
                    // console.log(err);
                });
        },

        // 获取商品分类列表
        getCategoryList(id, option) {
            let _dataJson = {
                ParentId: id,
                SelectId: "",
            };
            publishApi
                .getCategory(_dataJson)
                .then(({ data: res }) => {
                    if (res.code === 0) {
                        this[option] = res.data;
                    } else {
                        return false;
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        // 商品主图上传前操作
        handlePreviewMainPic() {},
        // 商品主图删除操作
        handleRemoveMainPic(file, fileList) {
            let currentImg = file.response.data;
            this.baseForm.ImgUrls = this.baseForm.ImgUrls.filter(
                (item) => item != currentImg
            );
        },
        // 商品主图上传成功
        handleSuccessMainPic(response, file, fileList) {
            if (response.code === 0) {
                let imgUrls = response.data;
                this.baseForm.ImgUrls.push(imgUrls);
            }
        },
        // 商品详情图上传前操作
        handlePreviewDetailPic(file) {
            this.detailPicDialogImageUrl = file.url;
            this.detailPicDialogVisible = true;
        },
        // 商品详情图删除操作
        handleRemoveDetailPic(file, fileList) {
            let currentImg = file.response.data;
            this.baseForm.InfoImgUrls = this.baseForm.InfoImgUrls.filter(
                (item) => item != currentImg
            );
        },
        // 商品详情图上传成功
        handleSuccessDetailPic(response, file, fileList) {
            if (response.code === 0) {
                let imgUrls = response.data;
                this.baseForm.InfoImgUrls.push(imgUrls);
            }
        },
        // 商品规格图上传成功
        handleUploadSpecPicSuccess(data, res, file) {
            console.log(data);
            console.log(res);
            console.log(file);
            if (res.code === 0) {
                let PicUrl = res.data;
                console.log(this.productSpecList);
                if (PicUrl) {
                    this.productSpecList.forEach((item) => {
                        item.selectList.forEach((value) => {
                            if (data.Id == value.Id) {
                                value.PicUrl = PicUrl;
                            }
                        });
                    });
                    this.$message.success("上传成功");
                    this.handleSpecChange();
                }
            }
        },

        // 选择一级分类
        chooseOneCategory(data) {
            if (data) {
                this.OneCategoryValue = data;
                this.getCategoryList(
                    this.OneCategoryValue,
                    "TwoCategoryOptions"
                );
                this.FourCategoryValue = "";
                this.ThreeCategoryValue = "";
                this.TwoCategoryValue = "";
                this.categoryOneChoose = true;
                this.specTable = [];
                this.productSpecList = [];
                this.productParamList = [];
                this.getProductParams(this.OneCategoryValue);
            } else {
                this.categoryOneChoose = false;
            }
        },
        // 选择一级分类后获取商品参数
        getProductParams(typeId) {
            let _dataJson = {
                GoodsTypeId: typeId,
                GoodsId: "",
            };
            publishApi
                .getProductParam(_dataJson)
                .then(({ data: res }) => {
                    // console.log(res);
                    if (res.code === 0) {
                        let temp = JSON.parse(
                            JSON.stringify(res.data)
                                .replace(/Id/g, "ParaId")
                                .replace(/ParaValue/g, "Value")
                        );

                        this.productParamList = temp;
                    } else {
                        return false;
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        // 选择二级分类
        chooseTwoCategory(data) {
            if (data) {
                this.TwoCategoryValue = data;
                this.getCategoryList(
                    this.TwoCategoryValue,
                    "ThreeCategoryOptions"
                );
                this.ThreeCategoryValue = "";
                this.FourCategoryValue = "";
                this.categoryTwoChoose = true;
                this.productSpecList = [];
                this.specTable = [];
                // 选择二级分类后获取商品规格
                this.getProductSpecs(this.TwoCategoryValue);
            } else {
                this.categoryTwoChoose = false;
            }
        },
        // 选择二级分类后获取商品规格
        getProductSpecs(typeId) {
            let _dataJson = {
                GoodsTypeId: typeId,
                ShopId: "",
            };
            publishApi
                .getProductSpec(_dataJson)
                .then(({ data: res }) => {
                    if (res.data && res.data.length > 0) {
                        res.data.forEach((item) => {
                            item.add = false;
                            item.checkSpecList = [];
                        });
                        this.productSpecList = res.data;
                        this.checked = true;
                        this.getBatchOptions();
                        let arr = [];
                        this.baseForm.Picmodels.forEach((select) => {
                            arr.push(select.GoodsSpecValueId);
                        });
                        this.productSpecList.forEach((list) => {
                            list.checkSpecList = arr;
                        });
                        this.handleSpecChange();
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },

        // 选择三级分类
        chooseThreeCategory(data) {
            if (data) {
                this.ThreeCategoryValue = data;
                this.getCategoryList(
                    this.ThreeCategoryValue,
                    "FourCategoryOptions"
                );
                this.FourCategoryValue = "";
                this.categoryThreeChoose = true;
                this.isPublish = false;
                this.baseForm.GoodsTypeId = this.ThreeCategoryValue;
            } else {
                this.categoryThreeChoose = false;
            }
        },
        // 选择四级分类
        chooseFourCategory(data) {
            if (data) {
                this.FourCategoryValue = data;
                this.baseForm.GoodsTypeId = this.FourCategoryValue;
            } else {
                this.categoryThreeChoose = false;
            }
        },
        // 点击添加规格按钮
        addSpec(item) {
            item.add = true;
        },
        // 删除规格
        removeSpecItem(child, item) {
            this.$confirm("此操作将永久该规格, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    let _dataJson = {
                        Id: child.Id,
                    };
                    publishApi
                        .deleteSpecValue(_dataJson)
                        .then(({ data: res }) => {
                            if (res.code === 0) {
                                this.$message.success("删除成功");
                                item.SpeValues = item.SpeValues.filter(
                                    (val) => {
                                        console.log(val.Id);
                                        if (child.Id === val.Id) {
                                            return false;
                                        } else {
                                            return val;
                                        }
                                    }
                                );
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                        .catch((err) => {
                            console.log(err);
                        });
                })
                .catch(() => {});
        },
        // 失去焦点添加规格
        addSpecDone(item) {
            if (item.addValue) {
                let _dataJson = {
                    GoodsSepcId: item.Id,
                    Name: item.addValue,
                    ShopId: item.ShopId,
                };
                publishApi
                    .addSpecValue(_dataJson)
                    .then(({ data: res }) => {
                        console.log(res);
                        if (res.code === 0) {
                            this.$message.success("添加规格成功");
                            this.getProductSpecs(this.TwoCategoryValue);
                        }
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            }
            item.add = false;
            item.addValue = "";
        },
        // 选择规格
        handleSpecChange() {
            let arr = [];
            this.productSpecList.forEach((item) => {
                console.log("~~~~~~~~~~~");
                console.log(item);
                let selectList = GetSpecListByIds(
                    item.checkSpecList,
                    item.SpeValues
                );

                // console.log(selectList);
                item.selectList = selectList;
                if (selectList && selectList.length > 0) {
                    arr.push(selectList);
                }
            });
            // console.log(arr);
            let desArr = calcDescartes(arr);

            let finalList = [];
            if (desArr && desArr.length > 0) {
                desArr.forEach((item) => {
                    // console.log(item);
                    let _tempObj = {};
                    if (!Array.isArray(item)) {
                        _tempObj.GoodsSpecValueId1 = item.Id;
                        _tempObj.GoodsSpecValueName1 = item.Name;
                        _tempObj.GoodsSepcId1 = item.GoodsSepcId;
                        _tempObj.GoodsSpecValueId2 = null;
                        _tempObj.GoodsSpecValueName2 = null;
                        _tempObj.PriceSupply = null;
                        _tempObj.Price = null;
                        _tempObj.Stock = null;
                    } else {
                        _tempObj.GoodsSpecValueId1 = item[0].Id;
                        _tempObj.GoodsSpecValueName1 = item[0].Name;
                        _tempObj.GoodsSepcId1 = item[0].GoodsSepcId;
                        _tempObj.GoodsSpecValueId2 = item[1].Id;
                        _tempObj.GoodsSpecValueName2 = item[1].Name;
                        _tempObj.GoodsSepcId2 = item[1].GoodsSepcId;
                        _tempObj.PriceSupply = null;
                        _tempObj.Price = null;
                        _tempObj.Stock = null;
                    }
                    finalList.push(_tempObj);
                });
            }

            // console.log(finalList);

            this.specTable = finalList;
            console.log("-------------");
            if (this.baseForm.Picmodels && this.baseForm.Picmodels.length > 0) {
                this.baseForm.Picmodels.forEach((pic) => {
                    this.baseForm.Pricemodels.forEach((item) => {
                        if (pic.Id == item.Spec1) {
                            item.GoodsSpecValueId1 = pic.GoodsSpecValueId;
                            item.GoodsSpecValueName1 = pic.GoodsSpecValueName;
                        }
                        if (pic.Id == item.Spec2) {
                            item.GoodsSpecValueId2 = pic.GoodsSpecValueId;
                            item.GoodsSpecValueName2 = pic.GoodsSpecValueName;
                        }
                    });
                });
            }

            console.log(this.baseForm.Pricemodels);
            this.specTable = this.baseForm.Pricemodels;
        },
        // 创建批量操作选择项
        getBatchOptions() {
            let option = [];
            this.productSpecList.forEach((item) => {
                // console.log(item);
                let _dataJson = {};
                _dataJson.typeId = item.Id;
                _dataJson.Title = "同" + item.Title;
                option.push(_dataJson);
            });
            option.unshift({ typeId: "0000", Title: "全部" });
            let arrs = [
                {
                    value: "price",
                    name: "售价相同",
                },
                {
                    value: "suply",
                    name: "供货价相同",
                },
                {
                    value: "stock",
                    name: "库存相同",
                },
            ];
            let finalList = [];
            arrs.forEach((arr) => {
                option.forEach((opt) => {
                    let temp = {};
                    temp.Id = arr.value + opt.typeId;
                    temp.typeId = opt.typeId;
                    temp.Title = opt.Title;
                    temp.value = arr.value;
                    temp.name = arr.name;
                    finalList.push(temp);
                });
            });
            // console.log(finalList);
            this.batchOptions = finalList;
        },
        // 批量操作
        handleSelect(data) {
            if (data.batchHandleValue.includes("price")) {
                //console.log("售价相同");
                if (data.batchHandleValue.includes(data.GoodsSepcId1)) {
                    // 规格一售价相同
                    this.specTable.forEach((item) => {
                        if (
                            item.GoodsSpecValueName1 == data.GoodsSpecValueName1
                        ) {
                            item.Price = data.Price;
                        }
                    });
                } else if (data.batchHandleValue.includes(data.GoodsSepcId2)) {
                    // 规格二售价相同
                    this.specTable.forEach((item) => {
                        if (
                            item.GoodsSpecValueName2 == data.GoodsSpecValueName2
                        ) {
                            item.Price = data.Price;
                        }
                    });
                } else if (data.batchHandleValue.includes("0000")) {
                    // 全部售价相同
                    this.specTable.forEach((item) => {
                        item.Price = data.Price;
                    });
                }
            } else if (data.batchHandleValue.includes("suply")) {
                //console.log("供货价相同");
                if (data.batchHandleValue.includes(data.GoodsSepcId1)) {
                    this.specTable.forEach((item) => {
                        if (
                            item.GoodsSpecValueName1 == data.GoodsSpecValueName1
                        ) {
                            item.PriceSupply = data.PriceSupply;
                        }
                    });
                } else if (data.batchHandleValue.includes(data.GoodsSepcId2)) {
                    this.specTable.forEach((item) => {
                        if (
                            item.GoodsSpecValueName2 == data.GoodsSpecValueName2
                        ) {
                            item.PriceSupply = data.PriceSupply;
                        }
                    });
                } else if (data.batchHandleValue.includes("0000")) {
                    this.specTable.forEach((item) => {
                        item.PriceSupply = data.PriceSupply;
                    });
                }
            } else if (data.batchHandleValue.includes("stock")) {
                // console.log("库存相同");
                if (data.batchHandleValue.includes(data.GoodsSepcId1)) {
                    this.specTable.forEach((item) => {
                        if (
                            item.GoodsSpecValueName1 == data.GoodsSpecValueName1
                        ) {
                            item.Stock = data.Stock;
                        }
                    });
                } else if (data.batchHandleValue.includes(data.GoodsSepcId2)) {
                    this.specTable.forEach((item) => {
                        if (
                            item.GoodsSpecValueName2 == data.GoodsSpecValueName2
                        ) {
                            item.Stock = data.Stock;
                        }
                    });
                } else if (data.batchHandleValue.includes("0000")) {
                    this.specTable.forEach((item) => {
                        item.Stock = data.Stock;
                    });
                }
            }
            data.batchHandleValue = "";
        },
        // 最终保存
        handleSave() {
            // 参数模型
            this.baseForm.ParaList = this.productParamList;
            // 规格图片
            this.baseForm.SpecPicList = [];
            if (this.productSpecList && this.productSpecList.length > 0) {
                this.productSpecList.forEach((item) => {
                    if (item.selectList && item.selectList.length > 0) {
                        item.selectList.forEach((value) => {
                            let _dataJson = {};
                            _dataJson.GoodsSpecValueId = value.Id;
                            _dataJson.PicUrl = "xxx";
                            this.baseForm.SpecPicList.push(_dataJson);
                        });
                    }
                });
            }

            
            // 规格价格
            this.baseForm.SpecPriceList = this.specTable;
            this.isPublish = true;
            publishApi
                .updateProduct(this.baseForm)
                .then(({ data: res }) => {
                    if (res.code === 0) {
                        this.$message.success("商品编辑成功");
                    } else {
                        this.$message.error(res.msg);
                    }
                    this.isPublish = false;
                })
                .catch((err) => {
                    console.log(err);
                    this.isPublish = false;
                });
        },
    },
};
</script>

<style lang="scss" scoped>
.btns {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}
.add-spec {
    height: 42px;
    font-size: 14px;
    margin-left: 20px;
}
</style>